/**
 * Created by Franklin on 2017/6/19.
 */

var React = require('react');
var Axios = require('axios');

var ModelSerDetail = React.createClass({
    getInitialState : function(){
        return {
            loading : true,
            behaviors : null,
            err : null,
            ms : null
        };
    },

    componentDidMount : function(){
        this.refresh();
    },

    refresh : function(){
        Axios.get(this.props['data-source']).then(
            data => {
                if(data.data.result == 'suc'){
                    this.setState({
                        loading : false,
                        err : null,
                        ms : data.data.data
                    });
                }
                else{
                    this.setState({
                        loading : false,
                        err : data.data.message,
                        ms : null
                    });
                }
            },
            err => {
                this.setState({
                    loading : false,
                    err : err.message,
                    ms : null
                });
            }
        );
    },

    onDeleted : function(){
        if(this.props['data-type'] == 'admin'){
            window.location.href = '/modelser/all';
        }
        else{
            window.location.href = '/public/modelser/all';
        }
    },

    openIODesDia : function(e, msid){
        Axios.get('/modelser/inputdata/json/' + msid).then(
            data => {
                if(data.data.result == 'suc')
                {
                    this.setState({behaviors: data.data.data});
                    $('#mdModelIDDesDia').modal('show');
                }
            },
            err => {}
        );

    },

    render : function(){
        if(this.state.loading){
            return (
                <span>loading...</span>
            );
        }
        if(this.state.err){
            return (
                <span>Error : {JSON.stringify(this.state.err)}</span>
            );
        }
        var platform = null;
        if(this.state.ms.ms_platform == 1){
            platform = (
                <span className="label label-info">
                    <i className="fa fa-windows"></i>&nbsp;
                    windows
                </span>
            )
        }
        else if(this.state.ms.ms_platform == 2){
            platform = (
                <span className="label label-info">
                    <i className="fa fa-linux"></i>&nbsp;
                    linux
                </span>
            )
        }
        else{
            platform = (
                <span className="label label-info">
                    Unknown
                </span>
            )
        }
        var status = null;
        if(this.state.ms.ms_status == 1){
            status = (
                <span className="badge badge-success">Avai</span>
            )
        }
        else {
            status = (
                <span className="badge badge-default">Unavai</span>
            );
        }
        var img = (<img width="128" height="128" src="/images/model_default.png" alt="Model Service" />);

        var moreInfo = null;
        if(this.state.ms.ms_model.m_url && this.state.ms.ms_model.m_url.trim() != ''){
            moreInfo = (<a href={this.state.ms.ms_model.m_url} >MORE</a>);
        }
        var url = window.location.href;
        url = url.substr(0, url.lastIndexOf(':') + 5);

        return (
            <div>
                <div className="panel panel-default">
                    <div className="panel-body">
                        <div className="row">
                            <div className="col-md-2">
                                <div className="blog-img">
                                    {img}
                                </div>
                            </div>
                            <div className="col-md-7">
                                <h1 className="mtop35">{ this.state.ms.ms_model.m_name }</h1>
                                <p className="muted" >
                                    Type&nbsp;:&nbsp;{ this.state.ms.ms_model.m_type }
                                </p >
                                <p className="muted" >
                                    Version&nbsp;:&nbsp;{ this.state.ms.mv_num }
                                </p>
                                <p className="muted" >
                                    Platform&nbsp;:&nbsp;{platform}
                                </p>
                                <p className="muted" >
                                    Status&nbsp;:&nbsp;{status}
                                </p>
                                Invoking&nbsp;:&nbsp;
                                <div className="input-group m-bot15">
                                    <span className="input-group-btn">
                                        <button title="PublicInvoking" type="button" className="btn btn-default" onClick={ (e) => { window.open(url + '/modelser/preparation/' + this.state.ms._id); } } ><i className="fa fa-retweet"></i></button>
                                    </span>
                                    <input type="text" readOnly="readonly" className="form-control" value={url + '/modelser/preparation/' + this.state.ms._id} />
                                </div>
                                <p className="muted" >
                                    Description&nbsp;:&nbsp;
                                    { this.state.ms.ms_des }

                                </p>
                                {moreInfo}
                                <br />
                                <br />
                                
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        );
    }
});

module.exports = ModelSerDetail;